import { useAddComment } from '@/services/comment';
import {
  LikeOutlined,
  DislikeOutlined,
  StarOutlined,
  PlusOutlined,
  CommentOutlined,
  LikeFilled,
  DislikeFilled,
  StarFilled,
} from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { Space, Tooltip, Button, Modal } from 'antd';
import TextArea from 'antd/es/input/TextArea';
import { useState } from 'react';
import dayjs from 'dayjs';

interface ActionListProps {
  aid: number;
  data: API.IArticleAction;
  callBack: (action: TAction, curVal: number) => void;
}

const ActionList: React.FC<ActionListProps> = ({ aid, data, callBack }) => {
  const { initialState } = useModel('@@initialState');
  const [modalTitle, setModalTitle] = useState<string>('');
  const [modalContent, setModalContent] = useState<string>('');
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const { mutateAsync: addComment } = useAddComment();
  const openModal = () => {
    setModalContent('');
    setModalTitle(`你 回复:`);
    setIsModalOpen(true);
  };
  const confirmModal = () => {
    addComment({
      accountId: initialState?.id,
      content: modalContent,
      datetime: dayjs().format('YYYY-MM-DD hh:mm:ss'),
      articleId: aid,
      parentId: -1,
      level: 0,
      replyId: -1,
    });
    setIsModalOpen(false);
  };

  return (
    <>
      <Space>
        <Tooltip title="点赞">
          <Button
            type="primary"
            size="large"
            shape="circle"
            onClick={() => callBack('zan', data.islike ?? 0)}
            icon={data.islike === 1 ? <LikeFilled /> : <LikeOutlined />}
          />
        </Tooltip>
        <Tooltip title="点踩">
          <Button
            type="primary"
            size="large"
            shape="circle"
            onClick={() => callBack('cai', data.islike ?? 0)}
            icon={data.islike === 2 ? <DislikeFilled /> : <DislikeOutlined />}
          />
        </Tooltip>
        <Tooltip title={data.star === 1 ? '取消收藏' : '收藏'}>
          <Button
            type="primary"
            size="large"
            shape="circle"
            onClick={() => callBack('star', data.star ?? 0)}
            icon={data.star === 1 ? <StarFilled /> : <StarOutlined />}
          />
        </Tooltip>
        <Tooltip title={!!data.attId ? '取关' : '关注'}>
          <Button
            type="primary"
            size="large"
            shape="circle"
            ghost={!!data.attId}
            onClick={() => callBack('attention', data.attId ?? -1)}
            icon={<PlusOutlined />}
          />
        </Tooltip>
        <Tooltip title="评论">
          <Button
            type="primary"
            size="large"
            shape="circle"
            icon={<CommentOutlined />}
            onClick={() => openModal()}
          />
        </Tooltip>
      </Space>
      <Modal
        title={modalTitle}
        open={isModalOpen}
        onOk={confirmModal}
        onCancel={() => setIsModalOpen(false)}
      >
        <TextArea
          value={modalContent}
          onChange={(e) => setModalContent(e.target.value)}
        ></TextArea>
      </Modal>
    </>
  );
};

export default ActionList;
